<%@page contentType="text/html;charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String extHome = request.getContextPath() + "/scripts/ext-2.0";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>简单的表单例子</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

		<link rel="stylesheet" type="text/css" href="<%=extHome%>/resources/css/ext-all.css">

		<script type="text/javascript" src="<%=extHome%>/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="<%=extHome%>/ext-all.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/myextjs/extjs.js"></script>
</head>
<body>
  <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
  <script>

function createForm() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
		
	var simpleForm = new Ext.FormPanel({
		labelAlign: 'left',
		title: '表单例子',
		buttonAlign:'right',
		bodyStyle:'padding:5px',
		width: 600,
		frame:true,
		labelWidth:80,
		items: [{
			layout:'column',
			border:false,
			labelSeparator:'：',
			items:[{
				columnWidth:.5,
				layout: 'form',
				border:false,
				items: [{
					xtype:'textfield',
					fieldLabel: '姓名',
					name: 'name',
					anchor:'90%'
				}]
			},{
				columnWidth:.25,
				layout: 'form',
				border:false,
				items: [{
					style:'margin-top:5px',
					xtype:'radio',
					fieldLabel: '性别',
					boxLabel:'男',
					name: 'sex',
					checked:true,
					inputValue:'男',
					anchor:'95%'
				}]
			},{
				columnWidth:.25,
				layout: 'form',
				labelWidth:0,
				labelSeparator:'',
				hideLabels:true,
				border:false,
				items: [{
						   style:'margin-top:5px',
					xtype:'radio',
					fieldLabel: '',
					boxLabel:'女',
					name: 'sex',
					inputValue:'女',
					anchor:'95%'
				}]
			},{
				columnWidth:.5,
				layout: 'form',
				border:false,
				items: [{
					xtype:'datefield',
					fieldLabel: '出生日期',
					name: 'birthday',
					anchor:'90%'
				}]
		  },{
				columnWidth:.5,
				layout: 'form',
				border:false,
				items: [{
					xtype:'combo',
					store: new Ext.data.SimpleStore(
					{
						fields: ["retrunValue", "displayText"],
						data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
					}),
					valueField :"retrunValue",
					displayField: "displayText",
					mode: 'local',
					forceSelection: true,
					blankText:'请选择学历',
					emptyText:'选择学历',
					hiddenName:'education',
					editable: true,
					triggerAction: 'all',
					allowBlank:false,
					fieldLabel: '学历',
					name: 'education',
					anchor:'90%'
				}]
		  },{
				columnWidth:.35,
				layout: 'form',
				border:false,
				items: [{
					xtype:'checkbox',
					fieldLabel: '权限组',
					boxLabel:'系统管理员',
					name: 'popedom',
					inputValue:'1',
					anchor:'95%'
				}]
		  },{
				columnWidth:.2,
				layout: 'form',
				labelWidth:0,
				labelSeparator:'',
				hideLabels:true,
				border:false,
				items: [{
					xtype:'checkbox',
					fieldLabel: '',
					boxLabel:'管理员',
					name: 'pepedom',
					inputValue:'2',
					anchor:'95%'
				}]
			},{
				columnWidth:.2,
				layout: 'form',
				labelWidth:0,
				labelSeparator:'',
				hideLabels:true,
				border:false,
				items: [{
					xtype:'checkbox',
					fieldLabel: '',
					boxLabel:'普通用户',
					name: 'pepedom',
					inputValue:'3',
					anchor:'95%'
				}]
			},{
				columnWidth:.25,
				layout: 'form',
				labelWidth:0,
				labelSeparator:'',
				hideLabels:true,
				border:false,
				items: [{
					xtype:'checkbox',
					fieldLabel: '',
					boxLabel:'访客',
					name: 'pepedom',
					inputValue:'4',
					anchor:'95%'
				}]
			},{
				columnWidth:.5,
				layout: 'form',
				border:false,
				items: [{
					xtype:'textfield',
					fieldLabel: '电子邮件',
					name: 'email',
					vtype:'email',
					allowBlank:false,
					anchor:'90%'
				}]
			},{
				columnWidth:.5,
				layout: 'form',
				border:false,
				items: [{
					xtype:'textfield',
					fieldLabel: '个人主页',
					name: 'url',
					vtype:'url',
					anchor:'90%'
				}]
			}]
		},{
			xtype:'tabpanel',
			plain:true,
			activeTab: 0,
			height:235,
			defaults:{bodyStyle:'padding:10px'},
			items:[{
				title:'登录信息',
				layout:'form',
				defaults: {width: 230},
				defaultType: 'textfield',
	 
				items: [{
					fieldLabel: '登录名',
					name: 'loginID',
					allowBlank:false,
					vtype:'alphanum',
					allowBlank:false
				},{
					inputType:'password',
					fieldLabel: '密码',
					name: 'password',
					allowBlank:false
				}]
			},{
				title:'数字时间字母',
				layout:'form',
				defaults: {width: 230},
				defaultType: 'textfield',
	 
				items: [{
						   xtype:'numberfield',
					fieldLabel: '数字',
					name: 'number'
				},{
						   xtype:'timefield',
					fieldLabel: '时间',
					name: 'time'
				},{
					fieldLabel: '纯字母',
					name: 'char',
					vtype:'alpha'
				}]
			},{
				title:'文本区域',
				layout:'fit',
				items: {
					xtype:'textarea',
					id:'area',
					fieldLabel:''
				}
			}]
		}],
	 
		buttons: [{
			text: '保存',
			handler:function(){
				   if(simpleForm.form.isValid()){
						   this.disabled=true;
						   simpleForm.form.doAction('submit',{
														 url:'test.asp',
														 method:'post',
														 params:'',
														  success:function(form,action){
																 Ext.Msg.alert('操作',action.result.data);
																 this.disabled=false;
														 },
														  failure:function(){
																 Ext.Msg.alert('操作','保存失败！');
																 this.disabled=false;
														 }
						   });
				   }
			}            
		},{
			text: '取消',
			handler:function(){simpleForm.form.reset();}
		}]
	});
	 
	simpleForm.render(document.getElementById("simpleForm"));
}
function createSampleForm() {
	var store={
		fields: ["primaryKey", "displayName"],
		data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
	};
	var store2={
		fields: ["primaryKey", "displayName"],
		data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专']]
	};
	var store3={
		fields: ["primaryKey", "displayName"],
		data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专']]
	};
	var view = {name:"Sample Form", displayColumnCount:2};
	view.properties = [
		{name:"text", displayTitle:"随意字符串",	displayType:"", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"email", displayTitle:"email",		displayType:"email", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"url", displayTitle:"url",			displayType:"url", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"required", displayTitle:"必填项",	displayType:"", dataType:"String", maxValue:"", minValue:"", required:true, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"password", displayTitle:"密码",		displayType:"password", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"alpha", displayTitle:"纯字母",		displayType:"alpha", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"alphanum", displayTitle:"字母数字",	displayType:"alphanum", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"number", displayTitle:"数字",		displayType:"", dataType:"int", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"date", displayTitle:"日期",			displayType:"", dataType:"date", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"time", displayTitle:"时间",		displayType:"", dataType:"time", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"textarea", displayTitle:"文本区域",	displayType:"textarea", dataType:"string", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:true, colspan:2, readonly:false},
		{name:"colspan", displayTitle:"跨列",		displayType:"", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:2, readonly:false},
		{name:"combo",		displayTitle:"下拉框",		displayType:"combo", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false, dataStore:store},
		{name:"radio",		displayTitle:"单选",		displayType:"radio", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false, dataStore:store2},
		{name:"checkbox",		displayTitle:"多选",		displayType:"checkbox", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false, dataStore:store3}
	];
	view.buttons = [{text:"Save",handler:function(){alert("Save")}},
		{text:"Cancel",handler:function(){alert("Cancel")}}
	];
	view.bindObject = {text:"Hello", email:"hotwhf@hotmail.com", url:"http://www.achievo.com", required:"required", alpha:"alpha", textarea:"I love my family", password:"password", alphanum:"Hello123", number:12345.67, date:new Date(), time:12, colspan:"This is a large text", combo:1, radio:"2", checkbox:3};
	//
	var children = [];
	var child1 = {name:"用户信息", displayColumnCount:1};
	child1.properties = [
		{name:"text2", displayTitle:"随意字符串",	displayType:"", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"email2", displayTitle:"email",		displayType:"email", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"url2", displayTitle:"url",			displayType:"url", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false}
	];
	children.push(child1);
	
	var child2 = {name:"详细信息", displayColumnCount:3};
	child2.properties = [
		{name:"url3", displayTitle:"url",			displayType:"url", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"required3", displayTitle:"必填项",	displayType:"", dataType:"String", maxValue:"", minValue:"", required:true, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"password3", displayTitle:"密码",		displayType:"password", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"alpha3", displayTitle:"纯字母",		displayType:"alpha", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"alphanum3", displayTitle:"字母数字",	displayType:"alphanum", dataType:"String", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"number3", displayTitle:"数字",		displayType:"", dataType:"int", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"date3", displayTitle:"日期",		displayType:"", dataType:"date", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false},
		{name:"time3", displayTitle:"时间",		displayType:"", dataType:"time", maxValue:"", minValue:"", required:false, queryString:"", dictCategoryCode:"", allowMultiRows:false, colspan:1, readonly:false}
	];
	child2.buttons = [{text:"Save",handler:function(){alert("Save")}},
		{text:"Cancel",handler:function(){alert("Cancel")}}
	];
	children.push(child2);

	view.children = children;
	//
	FormBuilder(document.getElementById("sampleForm"), {width:800}, view);
}
  </script>
  <input type="button" value="createSimpleForm" onclick="createForm()" />
  <input type="button" value="createSampleForm" onclick="createSampleForm()" />
  <div id="simpleForm"></div>
  <div id="sampleForm"></div>
	<div id="grid-example"></div>
</body>
</html>
